<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/bootstrap/bootstrap.css">
    <style>
        .card {
            width: 100%;
            margin: 20px auto;
        }

        .card {
            height: 300px;
        }

        .form-group label {
            margin-left: 22px;
            margin-top: 20px;
        }

        .form-group input {
            width: 350px;
            margin: 0 auto;
        }

        .col-12 {

            width: 350px;
            margin: 10px auto;
        }

        .table {
            width: 600px;
            margin: 0 auto;
            text-align: center;

        }

        .table tbody tr td {
            vertical-align: middle;
        }
    </style>
</head>

<body>

    <div id="app" class="app">

        <div class="card  Light card title" style="width: 400px;">

            <form>
                <div class="form-group ">
                    <label for="exampleInputEmail1">产品名称</label>
                    <input type="text" class="form-control" v-model="name">

                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">产品单价</label>
                    <input type="text" class="form-control" v-model="price">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">购买数量</label>
                    <input type="text" class="form-control" v-model="num">
                </div>

                <div class="col-12 d-grid gap-2">
                    <button class="btn btn-primary" type="button" @click="arr.push({
                        'name':name,
                        'num':num,
                        'price':price,
                        'state':false
                    })">添加至购物车</button>

                </div>
            </form>
            <table class="table table-bordered">
                <thead>
                    <tr class="table-dark">
                        <th scope="col"><input type="checkbox" @change="allcheck($event)"></th>
                        <th scope="col">编号</th>
                        <th scope="col">产品名称</th>
                        <th scope="col">产品单价</th>
                        <th scope="col">购买数量</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,i) of arr">
                      
                        <td scope="row"><input type="checkbox" v-model="item.state" @click='bu($event)' ></td>
                        <td>{{i+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>
                            <div class="input-group mb-3">
                                <span class="input-group-text" @click="item.num++">+</span>
                                <span class="form-control"
                                    aria-label="Amount (to the nearest dollar)">{{item.num}}</span>
                                <span class="input-group-text" @click="subNum(i)">—</span>
                            </div>
                        </td>
                        <td><button type="button" class="btn btn-danger" @click="remove(i)">删除</button></td>

                    </tr>

                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">总计：</td>
                        <td colspan="3">被选中<span style="color: red;">{{allchecked}}</span> 个, 总价<span
                                style="color: red;">{{allprice}}</span> 元
                        </td>
                        <td><button type="button" class="btn btn-danger" @click="aa()">删除选中项</button></td>
                    </tr>
                </tfoot>
            </table>

        </div>



    </div>
    <script type="module">

        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                   
                    arr: [],
                    skill: [],
                    name: '',
                    price: '',
                    num: '',
                    state: false,
                    allchecked: 0,
                    allprice: 0



                }
            },
            methods: {
                subNum(i) {
                    let temp = this.arr[i].num - 1
                    if (temp > 0) {
                        this.arr[i].num = temp
                    } else {
                        let flag = confirm('是否删除该产品')
                        if (flag == true) {
                            this.arr.splice(i, 1)
                        }
                    }
                },
                remove(i) {
                    this.arr.splice(i, 1)
                },
                aa() {
                    this.arr = this.arr.filter(item => !item.state)
                },
                // 全选
                allcheck(e) {
               
                    if(e.target.checked==true){
                      this.arr.forEach(item=>{
                            item.state=true
                      })
                    } 
                }
                

            }
        }).mount("#app");
    </script>
</body>

</html>